<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta charset="utf-8" />
		<title th:text="'二维码生成器 - '  +  #{website.name}"></title>

		<meta name="description" content="with draggable and editable events" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

	  	<!-- ico -->
	  	<link href="/static/web/img/logos/logo.ico" rel="shortcut icon" type="image/x-icon">
	  	
		<!-- bootstrap & fontawesome -->
		<link rel="stylesheet" href="/static/admin/css/bootstrap/bootstrap.min.css" />
		<link rel="stylesheet" href="/static/admin/font-awesome/4.5.0/css/font-awesome.min.css" />

		<!-- page specific plugin styles -->
		<link rel="stylesheet" href="/static/admin/css/jquery-ui/jquery-ui.min.css" />
		<link rel="stylesheet" href="/static/admin/css/jquery.gritter.min.css" />

		<!-- text fonts -->
		<link rel="stylesheet" href="/static/admin/css/fonts.googleapis.com.css" />

		<!-- ace styles -->
		<link rel="stylesheet" href="/static/admin/css/ace/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" />

		<!--[if lte IE 9]>
			<link rel="stylesheet" href="/static/admin/css/ace/ace-part2.min.css" class="ace-main-stylesheet" />
		<![endif]-->
		<link rel="stylesheet" href="/static/admin/css/ace/ace-skins.min.css" />
		<link rel="stylesheet" href="/static/admin/css/ace/ace-rtl.min.css" />

		<!--[if lte IE 9]>
		  <link rel="stylesheet" href="/static/admin/css/ace/ace-ie.min.css" />
		<![endif]-->

		<!-- inline styles related to this page -->

		<!-- ace settings handler -->
		<script src="/static/admin/js/ace/ace-extra.min.js"></script>

		<!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries -->

		<!--[if lte IE 8]>
		<script src="/static/admin/js/plugins/html5shiv.min.js"></script>
		<script src="/static/admin/js/plugins/respond.min.js"></script>
		<![endif]-->
	</head>

	<body class="no-skin">
	
	  <!-- 公共页面的头部 -->
	  <div th:insert="admin/common/header :: header"></div>
	
		<div class="main-container ace-save-state" id="main-container">
			<script type="text/javascript">
				try{ace.settings.loadState('main-container')}catch(e){}
			</script>
			
			<!-- 公共页面的侧边栏 -->
			<div th:replace="admin/common/sidebar :: sidebar"></div>

			<div class="main-content">
				<div class="main-content-inner">
					<div class="breadcrumbs ace-save-state" id="breadcrumbs">
						<ul class="breadcrumb">
							<li>
								<i class="ace-icon fa fa-home home-icon"></i>
								<a href="./index" th:text="#{admin.index.index}">主页</a>
							</li>
							<li>实用工具</li>
							<li>二维码生成器</li>
						</ul><!-- /.breadcrumb -->

						<!-- 公共页面的搜索框 -->
						<div th:replace="admin/common/search :: search"></div>
					</div>

					<div class="page-content">
						
						<!-- 引入公共的settings-container -->
						<div th:replace="admin/common/settingsContainer :: settings-container"></div>

						<div class="row">
							<div class="col-xs-12">
								<!-- PAGE CONTENT BEGINS -->
								<div class="row">
									<div class="col-sm-8">
										<div class="tabbable">
											<ul class="nav nav-tabs" id="myTab">
												<li class="active">
													<a data-toggle="tab" href="#text">
														文本
													</a>
												</li>
												<li>
													<a data-toggle="tab" href="#url">
														网址
													</a>
												</li>
												<li>
													<a data-toggle="tab" href="#decode">
														反解析
													</a>
												</li>
											</ul>

											<div class="tab-content">
												<div id="text" class="tab-pane fade in active">
									                <textarea class="form-control" rows="7" id="form-text"></textarea>
												</div>

												<div id="url" class="tab-pane fade">
													<textarea class="form-control" rows="7" id="form-url" placeholder="http:// 或 https:// 开头"></textarea>
												</div>
												<div id="decode" class="tab-pane fade">
													<div class="row">
														<div class="col-xs-12">
															<input enctype="multipart/form-data" type="file" id="input-qrcode" />
														</div>
													</div>
												</div>
											</div>
										</div>
									</div>
									<div class="col-sm-3" id="qrcode_result">
										<h5 class="widget-title normal center">生成结果</h5>
										<center>
											<img width="200px" height="200px" style="border:1px solid #C5D0DC;" id="qrcode-result" src="/static/admin/images/default/demo.png">
											<p class="blue" style="cursor:pointer;" onclick="downloadImg()">点击下载</p>
											<!-- 下面的方式有可能兼容性要差一点 -->
											<!-- <a class="blue" style="cursor:pointer;"  href="/static/admin/images/default/mark_b.png" download="w3logo">点击下载</a> -->
										</center>
										<div class="space-12"></div>
									</div>
									<div class="col-sm-3 hidden" id="decode_result">
										<h5 class="widget-title normal center">解析结果</h5>
										<center>
											<textarea rows="9" cols="25" style="border:1px solid #C5D0DC;" id="decode-result-detail"></textarea>
										</center>
										<div class="space-12"></div>
									</div>
								</div>
								<!-- PAGE CONTENT ENDS -->
								
							</div><!-- /.col -->
						</div><!-- /.row -->
						<div class="space-12"></div>
						<div class="col-xs-12 center">
							<button class="btn btn-lg btn-success" id="get-qrcode-btn">
								 生成二维码 
							</button>
							<button class="btn btn-lg btn-success hidden" id="decode-qrcode-btn">
								 解析二维码 
							</button>
						</div>
					</div><!-- /.page-content -->
				</div>
			</div><!-- /.main-content -->

			<!-- 公共页面的尾部 -->
			<div th:replace="admin/common/footer :: footer"></div>

			<a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
				<i class="ace-icon fa fa-angle-double-up icon-only bigger-110"></i>
			</a>
		</div><!-- /.main-container -->

		<!-- basic scripts -->
		
		<!--[if !IE]> -->
		<script src="/static/admin/js/jquery/jquery-2.1.4.min.js"></script>
		<!-- <![endif]-->

		<!--[if IE]>
		<script src="/static/admin/js/jquery/jquery-1.11.3.min.js"></script>
		<![endif]-->
		<script type="text/javascript">
			if('ontouchstart' in document.documentElement) document.write("<script src='/static/admin/js/jquery/jquery.mobile.custom.min.js'>"+"<"+"/script>");
		</script>
		<script src="/static/admin/js/bootstrap/bootstrap.min.js"></script>
		
		<!-- page specific plugin scripts -->
		<script src="/static/admin/js/jquery-ui/jquery-ui.custom.min.js"></script>
		<script src="/static/admin/js/jquery-ui/jquery.ui.touch-punch.min.js"></script>
		<script src="/static/admin/js/plugins/moment.min.js"></script>
		<script src="/static/admin/js/plugins/bootbox.js"></script>

		<!-- ace scripts -->
		<script src="/static/admin/js/ace/ace-elements.min.js"></script>
		<script src="/static/admin/js/ace/ace.min.js"></script>
		
		<script src="/static/admin/js/jquery/jquery.gritter.min.js"></script>
		
		<!-- gweb scripts -->
		<script type="text/javascript" src="/static/admin/js/gweb/gweb.js"></script>
		<script type="text/javascript" src="/static/admin/js/gweb/qrcode.js"></script>
		
	</body>
</html>

